<template>
  <view class="package">
    <intake-nav-bar title="充值套餐" dark :fixed="true" color="#fff" />
    <view class="_package">
      <!-- 活动banner -->
      <view class="banner">
        <view class="banner-content">
          <image :src="topImg"></image>
        </view>
      </view>
      <view class="content">
        <!-- 充值方式 -->
        <view class="recharge-section">
          <text class="section-title title">充值到账的水卡 <text class="title-des">请选择任意一种充值方式</text></text>
          <view class="method-list">
            <view class="method-item" v-for="(item, index) in typeList" :class="{ active: active === index }"
              @click="changeTabIndex(index)">
              <text>{{ item.name }}</text>
              <text>{{ item.tip }}</text>
            </view>
          </view>
          <!-- 账户余额 -->
          <view class="balance-section" v-if="active === 0">
            <view class="section-title">电子卡：<text class="strong">{{ cardAtive.card_code }}</text></view>
            <view class="section-title top39">账户余额（元） </view>
            <view class="balance-amount">{{ cardAtive.remaining_value }} <text class="unit">元</text><text
                class="address">归属机构：国润甄泉</text></view>
            <view class="tag-card" @click="changeWaterCard">
              <image :src="qhImg"></image>选择水卡
            </view>
          </view>

          <view class="input-box" v-if="active === 1">
            <input type="text" v-model="activeSelectCard" placeholder="输入你要充值的水卡卡号" />
          </view>
          <view class="scan-box" v-if="active === 2" @click="scanCard">
            <image :src="scanImg"></image> 扫描条形码
          </view>

        </view>
        <!-- <div class="marquee">
          <div class="marquee-content">
            <text class="record-text" v-for="(item, index) in 5" :key="index">用户24127****796 15分钟前充值了1次套餐</text>
          </div>
        </div> -->
        <!--      套餐-->
        <!-- 充值套餐列表 -->
        <view class="package-list">
          <view class="package-item">
            <text class="card-number">充值卡号 {{ activeSelectCard }}</text>
            <view class="package-grid">
              <view class="package-card" v-for="(item, index) in coupon_list" :key="index"
                :class="{ active: index === activeCard }" @click="changeCard(index, item.price, item.coupon_id)">
                <text class="price">¥{{ item.price }}</text>
                <text class="desc">到账{{ item.give_money }}元水卡</text>
                <text class="sub-desc">{{ item.remark || '-' }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 底部按钮 -->
        <button class="submit-btns" @click="recharge()">立即充值</button>
      </view>
    </view>

    <uni-popup ref="popup" background-color="#fff" @change="change">
      <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <div class="popTitle">选择水卡</div>
        <view class="water-list" v-for="(item, index) in cardList" :key="index"
          :class="{ activeListCard: activeListCard === item.card_code }" @click="selectList(item)">{{ item.card_code }}
        </view>
        <div class="cancelBtn" @click="closePop">确认</div>
      </view>
    </uni-popup>
  </view>
</template>

<script>

import { getCardCouponLists, getTcCouponLists } from '@/api/user/coupon.js';
import { checkCard } from '@/api/water';
import { getCardLists } from '@/api/user/card.js';
import { rechargeOrderAdd } from "@/api/user/recharge";
import { saveComplaints } from "@/api/public";

export default {
  data() {
    return {
      coupon_list: [],
      card_list: [],
      topImg: this.$common.imgUrl() + '/images/home/xianshi@2x.png',
      qhImg: this.$common.imgUrl() + '/images/home/qh@2x.png',
      scanImg: this.$common.imgUrl() + '/images/home/scanwhite@2x.png',
      text: "这是一个跑马灯效果的示例文本，你可以根据需要修改内容。",
      marqueeStyle: {},
      active: 0,
      activeCard: 0,
      activeListCard: 0,
      activeSelectCard: '',//当前水卡卡号
      typeList: [
        { active: 0, name: '方式一', tip: '已绑水卡' },
        { active: 0, name: '方式二', tip: '输入卡号' },
        { active: 0, name: '方式三', tip: '扫描二维码' },
      ],
      cardAtive: {},
      cardList: [],
      couponId: '',//被选中券id
      money: '',//被选中券金额
      openid: ''
    };
  },
  onLoad() {
    this.openid = JSON.parse(uni.getStorageSync('USER_INFO')).openid
    this.getCardlist()
    this.getCouponLists()
    this.initWaterCard()
  },
  methods: {
    // 查询水卡
    initWaterCard() {
      checkCard({}).then(res => {
        if (res.data.data.length != 0) {
          this.cardList = res.data.data
          if (res.data.data.length === 1) {
            this.cardAtive = res.data.data[0]
            this.activeListCard = res.data.data[0].card_code
            this.activeSelectCard = res.data.data[0].card_code
          } else {
            res.data.data.map(e => {
              if (e.is_default === 0) {
                this.cardAtive = e
                this.activeListCard = e.card_code
                this.activeSelectCard = res.data.data[0].card_code

              }
            })
          }
        }
      })
        .catch(res => {
        });
    },
    // 打开选择水卡弹框
    changeWaterCard() {
      this.$refs.popup.open()
    },
    //关闭选择水卡弹框
    closePop() {
      this.$refs.popup.close()
    },
    // 选择水卡
    selectList(e) {
      this.activeListCard = e.card_code
    },
    // 扫描条形码
    scanCard(e) {
      uni.scanCode({
        success: (res) => {
          const barcode = res.result.split("?n=")[1];
          // 将扫描到的条形码赋值给页面的某个变量
          this.activeListCard = barcode;
          this.activeSelectCard = barcode
          // 你可以在这里处理扫描到的条形码数据，比如显示在页面上或者发送到服务器
          uni.showToast({
            title: '扫描成功: ' + barcode,
            icon: 'none'
          });
        },
        fail: (err) => {
          // 扫描失败
          console.error('扫描失败:', err);
          uni.showToast({
            title: '扫描失败',
            icon: 'none'
          });
        }
      });
    },
    // 充值
    recharge() {
      rechargeOrderAdd({ type: "recharge", coupon_id: this.couponId, amount: this.money, card_no: this.activeSelectCard, openid: this.openid }).then(res => {
        const { data } = res
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: data.timeStamp, // 时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数
          nonceStr: data.nonceStr, // 随机字符串，不长于 32 位
          package: data.package, // 统一下单接口返回的 prepay_id 参数值，格式如：prepay_id=xxx
          signType: 'RSA', // 签名类型，默认为 'MD5'，支持 'HMAC-SHA256'
          paySign: data.paySign, // 签名，具体签名生成方式见微信支付文档
          success: function (res) {
            if (res.status === 0) {
              uni.showToast({
                title: '充值成功',
                icon: 'none'
              });

            }
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/home'
              });
            }, 2000);
          },
          fail: function (err) {
            uni.showToast({
              title: '充值失败',
              icon: 'none'
            });
          }
        });

      })

    },
    // 方式tab切换
    changeTabIndex(index) {
      this.activeSelectCard = ''
      if (index === 0) {
        this.activeSelectCard = this.activeListCard
      }
      this.active = index
    },
    // 选中充值面额
    changeCard(index, money, id) {
      this.activeCard = index
      this.money = money
      this.couponId = id
    },
    // 切换充值方式
    switchMethod(methodId) {
      this.activeMethod = methodId
      // 切换时清空输入
      if (methodId !== 'input') this.cardNumber = ''
    },

    // 扫描二维码
    startScan() {
      uni.scanCode({
        success: (res) => {
          console.log('扫描结果:', res.result)
          this.cardNumber = res.result // 将结果填入卡号
          this.activeMethod = 'input'  // 自动切换到输入卡号界面
        }
      })
    },
    getCardlist() {
      let that = this;
      getCardLists().then(res => {
        that.card_list = res.data;
      })
    },
    getCouponLists() {
      let that = this;
      getTcCouponLists().then(res => {
        that.coupon_list = res.data;
        this.money = res.data[0].price
        this.couponId = res.data[0].coupon_id
      })
    },
  },
}
</script>

<style lang="scss">
.package {
  background: url($baseUrl + '/images/bg/setmenu@2x.png') no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh;
  overflow: auto;
  /* 使用视口高度，确保元素高度充满整个屏幕 */
  //display: flex;
  // justify-content: center;
  // background-size: cover;
  /* 使背景图片覆盖整个元素 */
  // padding: 0 30rpx;

  ._package {
    .banner {
      height: auto;
      // background-color: #FF9900;
      border-radius: 16rpx;

      .banner-content {
        text-align: center;

        image {
          width: 749rpx;
          height: 405rpx;
        }

        .banner-title {
          font-size: 20px;
          color: #FFFFFF;
          font-weight: bold;
          display: block;
          margin-bottom: 10rpx;
        }

        .banner-desc {
          font-size: 14px;
          color: #FFFFFF;
        }
      }
    }

    .content {
      width: 100%;
      padding: 0 30rpx;
    }

    .recharge-section {
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;

      .section-title {
        font-size: 25rpx;
        line-height: 36rpx;

        span {
          font-weight: 550;
          ;
        }
      }

      .title {
        font-size: 29rpx;
        font-weight: bold;
      }

      .title-des {
        float: right;
        font-size: 21rpx;
        color: #212B3D;
      }

      .top39 {
        margin-top: 25rpx;
      }

      .method-list {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;

        .method-item {
          border: 1px solid #F5F5F5;
          padding: 20rpx;
          border-radius: 8rpx;
          text-align: center;
          flex: 1;
          margin: 0 10rpx;

          text {
            display: block;
            font-size: 12px;
            color: #666666;
          }
        }

        .active {
          background-color: #F9A006;

          border: none;

          text {
            color: #fff;
          }

        }
      }

      /* 余额样式 */
      .balance-section {
        position: relative;
        width: 635rpx;
        height: 165rpx;
        // text-align: center;
        padding: 21rpx 30rpx;
        background-color: #D7ECFF;
        border-radius: 20rpx;

        .balance-amount {
          font-size: 32rpx;
          font-weight: bolder;

          .address {
            font-size: 21rpx;
            font-weight: 500;
            float: right;
          }

          .unit {
            font-size: 18rpx;
            font-weight: 400;
            margin-left: 10rpx;
          }
        }

        .tag-card {
          position: absolute;
          top: 20rpx;
          right: 36rpx;
          width: 134rpx;
          height: 36rpx;
          border-radius: 40rpx;
          background-color: #FF9900;
          color: #fff;
          text-align: center;
          line-height: 36rpx;
          font-size: 21rpx;

          image {
            width: 21rpx;
            height: 18rpx;
            margin-right: 5rpx;
          }
        }

        .organization {

          font-size: 21rpx;
        }

        .strong {
          font-weight: 550;
        }
      }

      .input-box {
        background-color: #F5F5F5;
        padding: 20rpx;
        border-radius: 8rpx;
        margin-bottom: 20rpx;

        input {
          font-size: 14px;
        }
      }

      .scan-box {
        width: 635rpx;
        height: 75rpx;
        background-color: #FF9900;
        color: #fff;
        font-size: 29rpx;
        text-align: center;
        line-height: 75rpx;
        border-radius: 10rpx;

        image {
          width: 28rpx;
          height: 27rpx;
          margin: 0 5rpx -2rpx 0;
        }
      }

      // .history-record {
      //   margin-top: 20rpx;

      //   .record-text {
      //     font-size: 12px;
      //     color: #999999;
      //     display: block;
      //     margin-bottom: 10rpx;
      //   }

      // }

    }

    .marquee {
      width: 100%;
      /* 或者具体的宽度 */
      height: 55rpx;
      overflow: hidden;
      white-space: nowrap;
      /* 防止内容换行 */
      box-sizing: border-box;
      /* 确保padding不影响实际宽度 */
      background-color: #F9F8E3;
      margin: 20rpx 0;
      border-radius: 10rpx;
      line-height: 55rpx;
      font-size: 25rpx;
    }

    .marquee-content {
      width: 690rpx;
      height: 55rpx;
      color: #FF6745;
      display: inline-block;
      padding-left: 100%;
      /* 使内容一开始就完全显示在视图之外 */
      animation: marquee 15s linear infinite;

      /* 动画名称、持续时间、速度曲线和重复次数 */
      text {
        margin-right: 100rpx;
      }
    }

    @keyframes marquee {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-100%);
      }

      /* 根据内容长度调整 */
    }

    .package-list {
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 22rpx;

      .package-item {
        .card-number {
          font-size: 14px;
          color: #333333;
          margin-bottom: 20rpx;
          display: block;
        }

        .package-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20rpx;

          .package-card {
            background-color: #F5F5F5;
            padding: 20rpx;
            border-radius: 8rpx;
            text-align: center;

            .price {
              font-size: 18px;
              color: #333333;
              font-weight: bold;
              display: block;
              margin-bottom: 10rpx;
            }

            .desc {
              font-size: 12px;
              color: #666666;
              display: block;
              margin-bottom: 6rpx;
            }

            .sub-desc {
              font-size: 12px;
              color: #999999;
              display: block;
            }
          }

          .active {
            background-color: #FF9900;

            text {
              color: #fff !important;
            }
          }
        }
      }

    }

    .submit-btns {
      // position: fixed;
      // bottom: 30rpx;
      // left: 30rpx;
      // right: 30rpx;
      margin: 30rpx 0;
      width: 690rpx;
      height: 99rpx;
      line-height: 99rpx;
      background-color: #FF9900;
      color: #FFFFFF;
      font-size: 38rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
<style lang="scss" scoped>
@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

@mixin height {
  /* #ifndef APP-NVUE */
  height: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
}

.box {
  @include flex;
}

.button {
  @include flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 35px;
  margin: 0 5px;
  border-radius: 5px;
}

.example-body {
  background-color: #fff;
  padding: 10px 0;
}

.button-text {
  color: #fff;
  font-size: 12px;
}

.popup-content {
  position: relative;
  width: 690rpx;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 480rpx;
  border-radius: 20rpx;
  background-color: #fff;

  .water-list {
    // line-height: 50rpx;
    padding: 23rpx 36rpx;
  }
}

.activeListCard {
  background-color: #FDF2F2;
  padding: 23rpx 36rpx;
}

.popTitle {
  text-align: center;
  font-size: 36rpx;
  margin-bottom: 20rpx;
}

.cancelBtn {
  position: absolute;
  bottom: 20rpx;
  left: 240rpx;
  width: 200rpx;
  height: 66rpx;
  line-height: 66rpx;
  text-align: center;
  color: #fff;
  background-color: #E32921;
  border-radius: 10rpx;
  margin: 36rpx auto 0;
}
</style>
